<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bus</title>
	<style>
		img {
			animation: car 15s infinite; /*调用动画*/
		}
			/*定义动画 百分比是指整个动画耗时的百分比 */
		@keyframes car {
			0% {
				transform: translate3d(0,0,0);
			}
			50% {
				transform: translate3d(1000px,0,0);
			}
			51% {   /*车要掉头 所以要翻转  先移动 再翻转有顺序的*/
				transform: translate3d(1000px,0,0) rotateY(180deg);
				/*如果有多组变形 都属于transform，那我们用空格隔开即可 */
			}
			99% {
				transform: translate3d(0,0,0) rotateY(180deg);
			}
		}
	</style>
</head>
<body>
	<img src="image/car.jpg" width="200" alt="">
</body>
</html>